import React, { useState } from 'react';
import { Mail, MapPin, Phone, Clock, Send } from 'lucide-react';
import { usePageTitle, PAGE_TITLES } from '../lib/usePageTitle';

export function ContactPage() {
  usePageTitle(PAGE_TITLES.CONTACT);
  
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    subject: '',
    message: ''
  });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle form submission here
    console.log('Form submitted:', formData);
    // You can add actual form submission logic here
    alert('Thank you for your message! We will get back to you soon.');
    setFormData({ name: '', email: '', subject: '', message: '' });
  };

  return (
    <div className="w-full bg-[#0a2540] text-white">
      {/* Hero Section */}
      <section className="py-20 px-4 md:px-8">
        <div className="container mx-auto">
          <div className="max-w-3xl mx-auto text-center">
            <h1 className="text-5xl md:text-7xl font-extrabold mb-6">
              GET IN TOUCH
            </h1>
            <p className="text-xl md:text-2xl mb-12 text-gray-200">
              Have questions about our reviews? Want to suggest a product for testing? 
              We'd love to hear from you.
            </p>
          </div>
        </div>
      </section>

      {/* Contact Info Section */}
      <section className="py-16 px-4 md:px-8 bg-[#061a2c]">
        <div className="container mx-auto">
          <div className="max-w-6xl mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
              <div className="text-center">
                <div className="w-16 h-16 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mx-auto mb-4">
                  <Mail className="text-[#06d6a0]" size={24} />
                </div>
                <h3 className="text-xl font-bold mb-2">Email Us</h3>
                <p className="text-gray-300">hello@vitaincubator.com</p>
                <p className="text-sm text-gray-400 mt-1">We respond within 24 hours</p>
              </div>
              <div className="text-center">
                <div className="w-16 h-16 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mx-auto mb-4">
                  <Phone className="text-[#06d6a0]" size={24} />
                </div>
                <h3 className="text-xl font-bold mb-2">Call Us</h3>
                <p className="text-gray-300">+1 (555) 123-4567</p>
                <p className="text-sm text-gray-400 mt-1">Mon-Fri 9AM-6PM EST</p>
              </div>
              <div className="text-center">
                <div className="w-16 h-16 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mx-auto mb-4">
                  <MapPin className="text-[#06d6a0]" size={24} />
                </div>
                <h3 className="text-xl font-bold mb-2">Visit Us</h3>
                <p className="text-gray-300">123 Health Street</p>
                <p className="text-gray-300">San Francisco, CA 94105</p>
              </div>
              <div className="text-center">
                <div className="w-16 h-16 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mx-auto mb-4">
                  <Clock className="text-[#06d6a0]" size={24} />
                </div>
                <h3 className="text-xl font-bold mb-2">Business Hours</h3>
                <p className="text-gray-300">Monday - Friday</p>
                <p className="text-gray-300">9:00 AM - 6:00 PM EST</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Form Section */}
      <section className="py-16 px-4 md:px-8">
        <div className="container mx-auto">
          <div className="max-w-4xl mx-auto">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
              {/* Form */}
              <div>
                <h2 className="text-3xl font-bold mb-6">Send us a Message</h2>
                <form onSubmit={handleSubmit} className="space-y-6">
                  <div>
                    <label htmlFor="name" className="block text-sm font-medium mb-2">
                      Full Name *
                    </label>
                    <input
                      type="text"
                      id="name"
                      name="name"
                      value={formData.name}
                      onChange={handleInputChange}
                      required
                      className="w-full px-4 py-3 bg-[#061a2c] border border-[#1a3a5c] rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-[#06d6a0] focus:ring-1 focus:ring-[#06d6a0]"
                      placeholder="Enter your full name"
                    />
                  </div>
                  <div>
                    <label htmlFor="email" className="block text-sm font-medium mb-2">
                      Email Address *
                    </label>
                    <input
                      type="email"
                      id="email"
                      name="email"
                      value={formData.email}
                      onChange={handleInputChange}
                      required
                      className="w-full px-4 py-3 bg-[#061a2c] border border-[#1a3a5c] rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-[#06d6a0] focus:ring-1 focus:ring-[#06d6a0]"
                      placeholder="Enter your email address"
                    />
                  </div>
                  <div>
                    <label htmlFor="subject" className="block text-sm font-medium mb-2">
                      Subject *
                    </label>
                    <select
                      id="subject"
                      name="subject"
                      value={formData.subject}
                      onChange={handleInputChange}
                      required
                      className="w-full px-4 py-3 bg-[#061a2c] border border-[#1a3a5c] rounded-lg text-white focus:outline-none focus:border-[#06d6a0] focus:ring-1 focus:ring-[#06d6a0]"
                    >
                      <option value="">Select a subject</option>
                      <option value="product-suggestion">Product Suggestion</option>
                      <option value="review-question">Question About a Review</option>
                      <option value="partnership">Partnership Inquiry</option>
                      <option value="press">Press Inquiry</option>
                      <option value="technical-issue">Technical Issue</option>
                      <option value="other">Other</option>
                    </select>
                  </div>
                  <div>
                    <label htmlFor="message" className="block text-sm font-medium mb-2">
                      Message *
                    </label>
                    <textarea
                      id="message"
                      name="message"
                      value={formData.message}
                      onChange={handleInputChange}
                      required
                      rows={6}
                      className="w-full px-4 py-3 bg-[#061a2c] border border-[#1a3a5c] rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-[#06d6a0] focus:ring-1 focus:ring-[#06d6a0] resize-vertical"
                      placeholder="Tell us how we can help you..."
                    />
                  </div>
                  <button
                    type="submit"
                    className="w-full bg-[#06d6a0] text-[#0a2540] px-6 py-3 rounded-lg font-semibold hover:bg-[#04a575] transition-colors duration-200 flex items-center justify-center"
                  >
                    Send Message
                    <Send className="ml-2" size={20} />
                  </button>
                </form>
              </div>

              {/* FAQ */}
              <div>
                <h2 className="text-3xl font-bold mb-6">Frequently Asked</h2>
                <div className="space-y-6">
                  <div className="bg-[#061a2c] p-6 rounded-lg">
                    <h3 className="text-lg font-bold mb-3">How do you test products?</h3>
                    <p className="text-gray-300">
                      We purchase all products with our own funds and put them through 
                      rigorous testing protocols. Each product is tested for weeks or 
                      months by our team of experts in real-world conditions.
                    </p>
                  </div>
                  <div className="bg-[#061a2c] p-6 rounded-lg">
                    <h3 className="text-lg font-bold mb-3">Can I suggest a product for review?</h3>
                    <p className="text-gray-300">
                      Absolutely! We love hearing from our readers about products 
                      they'd like us to test. Use the contact form with "Product 
                      Suggestion" as the subject.
                    </p>
                  </div>
                  <div className="bg-[#061a2c] p-6 rounded-lg">
                    <h3 className="text-lg font-bold mb-3">Do you accept products for free?</h3>
                    <p className="text-gray-300">
                      No, we never accept free products from manufacturers. This 
                      ensures our reviews remain completely unbiased and trustworthy.
                    </p>
                  </div>
                  <div className="bg-[#061a2c] p-6 rounded-lg">
                    <h3 className="text-lg font-bold mb-3">How fast do you respond?</h3>
                    <p className="text-gray-300">
                      We aim to respond to all inquiries within 24 hours during 
                      business days. Complex technical questions may take up to 
                      48 hours.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Interactive Map Section */}
      <section className="py-16 px-4 md:px-8 bg-[#061a2c]">
        <div className="container mx-auto">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-3xl font-bold mb-6 text-center">Find Our Office</h2>
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
              {/* Map */}
              <div className="lg:col-span-2">
                <div className="bg-[#0a2540] rounded-lg overflow-hidden h-96 relative">
                  <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3152.8981426983!2d-122.40641148468174!3d37.78584297975737!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085807c3c82e6a7%3A0x5a61bb3cf6a8befe!2s123%20Main%20St%2C%20San%20Francisco%2C%20CA%2094105!5e0!3m2!1sen!2sus!4v1693421234567!5m2!1sen!2sus"
                    width="100%"
                    height="100%"
                    style={{ border: 0 }}
                    allowFullScreen
                    loading="lazy"
                    referrerPolicy="no-referrer-when-downgrade"
                    className="w-full h-full"
                    title="VitaIncubator Office Location"
                  ></iframe>
                  {/* Map overlay for dark theme integration */}
                  <div className="absolute inset-0 pointer-events-none border border-[#1a3a5c] rounded-lg"></div>
                </div>
                <div className="mt-4 flex flex-wrap gap-2">
                  <button
                    onClick={() => window.open('https://maps.google.com/?q=123+Health+Street,+San+Francisco,+CA+94105', '_blank')}
                    className="bg-[#06d6a0] text-[#0a2540] px-4 py-2 rounded-lg font-semibold hover:bg-[#04a575] transition-colors duration-200 flex items-center"
                  >
                    <MapPin className="mr-2" size={16} />
                    Open in Google Maps
                  </button>
                  <button
                    onClick={() => window.open('https://maps.apple.com/?q=123+Health+Street,+San+Francisco,+CA+94105', '_blank')}
                    className="bg-[#0a2540] text-white border border-[#1a3a5c] px-4 py-2 rounded-lg font-semibold hover:bg-[#1a3a5c] transition-colors duration-200 flex items-center"
                  >
                    <MapPin className="mr-2" size={16} />
                    Open in Apple Maps
                  </button>
                </div>
              </div>

              {/* Office Info */}
              <div className="lg:col-span-1">
                <div className="bg-[#0a2540] p-6 rounded-lg h-full">
                  <div className="text-center mb-6">
                    <MapPin className="text-[#06d6a0] mx-auto mb-4" size={48} />
                    <h3 className="text-xl font-bold mb-2">VitaIncubator HQ</h3>
                  </div>
                  
                  <div className="space-y-4">
                    <div>
                      <h4 className="font-bold text-[#06d6a0] mb-2">Address</h4>
                      <p className="text-gray-300">123 Health Street</p>
                      <p className="text-gray-300">San Francisco, CA 94105</p>
                      <p className="text-gray-300">United States</p>
                    </div>
                    
                    <div>
                      <h4 className="font-bold text-[#06d6a0] mb-2">Directions</h4>
                      <p className="text-sm text-gray-300">
                        Located in the heart of SOMA district, easily accessible via BART and Muni.
                      </p>
                    </div>
                    
                    <div>
                      <h4 className="font-bold text-[#06d6a0] mb-2">Parking</h4>
                      <p className="text-sm text-gray-300">
                        Street parking available. Nearby parking garages on Mission and Howard Streets.
                      </p>
                    </div>
                    
                    <div>
                      <h4 className="font-bold text-[#06d6a0] mb-2">Public Transit</h4>
                      <p className="text-sm text-gray-300">
                        Montgomery St BART station (2 blocks)
                      </p>
                      <p className="text-sm text-gray-300">
                        Multiple Muni bus lines nearby
                      </p>
                    </div>
                    
                    <div className="pt-4 border-t border-[#1a3a5c]">
                      <h4 className="font-bold text-[#06d6a0] mb-2">Visit Us</h4>
                      <p className="text-sm text-gray-300">
                        Office visits by appointment only. Please contact us in advance to schedule a meeting.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
